<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="item in goods">商品名称{{item.name}}</li>
           <p>{{ha}}</p>
       </ul>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                goods:[
                    {id:11,name:"和成天下",price:50},
                    {id:22,name:"打火机",price:60},
                    {id:33,name:"剃须刀",price:40},
                    {id:44,name:"槟榔",price:20},
                    {id:55,name:"麻将",price:60},
                ]
            },
            computed:{
                ha:function(){
                    var sum = 0;
                    for(var i = 0 ;i<this.goods.length;i++){
                        sum += this.goods[i].price;
                    }
                    return sum;
                }
            }
            
        })
    </script>
</body>
</html>